<template>
  <div>
    <el-card class="box-card">
      <el-radio-group v-model="formData.status" size="small"  @change="handleSearch">
        <el-radio-button :label="0">全 部</el-radio-button>
        <el-radio-button :label="1">审批中</el-radio-button>
        <el-radio-button :label="2">已完成</el-radio-button>
        <el-radio-button :label="3">已驳回</el-radio-button>
        <el-radio-button :label="4">已作废</el-radio-button>
      </el-radio-group>
    </el-card>
    <el-card class="box-card">
      <!--
          loading：Boolean   // 加载中...
          total ：Number     // 总条数
          limit ：Number     // 每页多少条
          page ：Number      // 当前页
          tableData ：Array  // 表格数据
          tableHeader ：Array // 表头数据
          current-events ： event // 当前页发生改变
          size-events ： event // 当前页发生改变
          show-row-key : String || Funtion
              行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问：
          selection-show : 多选是否显示
          indexShow:  Boolean  序号,
          pagination_loaction: rigth | center | left 分页位置
          handle-row-click": 单击某一行
          multiple-Selection： 单击么个选择框
       -->
      <el-button type="primary" @click="clearCheckout">清空选中</el-button>
      <comp-table
       ref="mt"
      :loading="loading"
      :table-data="tableData"
      :table-header="tableHeader"
      :total="total"
      :show-row-key="true"
      :selection-show="true"
      :indexShow="true"
      :limit="formData.limit"
      :page="formData.page"
      :pagination_loaction="center"
      @current-events="handlePage"
      @size-events="handleSize"
      @handle-row-click="handlerowClick"
      @multiple-Selection="handlerSelection"
    >
      <template slot="status" slot-scope="scope">
          <span v-if="scope.row.status == 1">审批中</span>
          <span v-else-if="scope.row.status == 2">已完成</span>
          <span v-else-if="scope.row.status == 3">已驳回</span>
          <span v-else>已作废</span>
      </template>
    </comp-table>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      loading: false,
      total: 10,
      center: 'center',
      formData: {
        status: 0,
        limit: 3,
        page: 1
      },
      tableHeader: [
        { label: '单号', prop: 'numbers', filter: 'noVal', minWidth: 140 },
        { label: '单据模版', prop: 'bill_name', filter: 'noVal', minWidth: 140 },
        { label: '归属公司', prop: 'company_branch_name', filter: 'noVal', minWidth: 100 },
        { label: '归属事业部', prop: 'division_name', filter: 'noVal', minWidth: 100 },
        { label: '借款金额', prop: 'money', filter: 'noVal', minWidth: 100 },
        { label: '借款时间', prop: 'borrow_date', filter: 'noVal', minWidth: 100 },
        { label: '归还时间',
          type: 'switch',
          prop: 'due_date',
          handelChange: data => this.handelChange(data),
          filter: 'noVal',
          minWidth: 100 },
        // { label: '提交人', prop: 'user_name', filter: 'noVal', minWidth: 90 },
        { label: '提交人', type: 'input', prop: 'user_name', minWidth: 90 },
        { label: '提交时间', prop: 'create_time', change: (data, ev) => this.changes(data, ev) },
        { type: 'slot', label: '单据状态', prop: 'status', minWidth: 80 },
        {
          label: '操作',
          width: 100,
          type: 'button',
          operation: [
            { name: '编辑', clickFun: data => this.handleUserEdit(data.numbers) },
            { name: '删除', clickFun: data => this.handleUserDelete(data.numbers) }
          ]}
      ],
      tableData: []
    }
  },
  created () {
    this.initdata()
  },
  methods: {
    initdata () {
      this.tableData = [
        {
          numbers: '111',
          bill_name: '22',
          company_branch_name: '22',
          division_name: '-',
          money: '22',
          borrow_date: '22',
          due_date: '22',
          user_name: '22',
          create_time: '22',
          status: 0,
          due_status: 0
        },
        {
          numbers: '222',
          bill_name: '22',
          company_branch_name: '22',
          division_name: '-',
          money: '22',
          borrow_date: '22',
          due_date: '22',
          user_name: '22',
          create_time: '22',
          status: 1,
          due_status: 1
        }
      ]
    },
    // 但钱 全部 审批 完成 驳回
    handleSearch (val) {
      console.log(val)
    },
    // 清空 选中
    clearCheckout () {
      this.$refs.mt.clearSelection()
    },
    // 编辑
    handleUserEdit (val) {
      this.$message.success('你单击了编辑', val)
    },
    // 删除
    handleUserDelete (val) {
      this.$message.success('你单击了删除', val)
    },
    // input
    changes (val, ev) {
      console.log(val, ev)
    },
    // table中的swtich
    handelChange (data) {
      console.log(data)
      this.$message.success('你单击了Swtich', data)
    },
    // 表格 每一项
    handlerowClick (val) {
      console.log('table每一项', val)
    },
    // table多选
    handlerSelection (val) {
      console.log('table多选', val)
    },
    // 单击每一页
    handlePage (val) {
      console.log('当前页是：', val)
      this.formData.page = val
    },
    // 每页发生改变
    handleSize (val) {
      console.log('每页多少条', val)
      this.formData.limit = val
    }
  }
}
</script>

<style scoped lang="less">

</style>
